<html>
  <head>
    <title></title>
    <style>
    
      div { size:200px; border:1px solid; margin:*; }

      #svgPath { aspect: PathContent; }


      PathContent
    
    </style>
    <script type="text/tiscript">
    
    function roundedRect(x,y,width,height,radius)
    {
        var path = new Graphics.Path();
    
        // draw top and top right corner
        path.moveTo(x+radius,y);
        path.arcTo(x+width,y,x+width,y+radius,radius);

        // draw right side and bottom right corner
        path.arcTo(x+width,y+height,x+width-radius,y+height,radius); 

        // draw bottom and bottom left corner
        path.arcTo(x,y+height,x,y+height-radius,radius);

        // draw left and top left corner
        path.arcTo(x,y,x+radius,y,radius);
        path.close();
        
        return path;
    }
    
    
    $(div#arcTo1).paintContent = function( gfx ) {
    
      var (w,h) = this.box(#dimension);
      
      var path = new Graphics.Path();
      path.moveTo(200,0)
          .arcTo(0,0,0,200,100);
          
      //var path = roundedRect(10,10,w-20,h-20,30);
          
      gfx.lineWidth(4)
         .lineColor(color(0xFF,0,0))
         .drawPath( path);
    }; 
    
    $(div#arcTo2).paintContent = function( gfx ) {
    
      var (w,h) = this.box(#dimension);
      
      var path = new Graphics.Path();
      //path.moveTo(200,0)
      //    .arcTo(0,0,0,200,100);
          
      path.moveTo(200,200)
          .arcTo(200,0,0,0,100);
      
      
      //var path = roundedRect(10,10,w-20,h-20,30);
          
      gfx.lineWidth(4)
         .lineColor(color(0xFF,0,0))
         .drawPath( path);
    };

    $(div#arcTo3).paintContent = function( gfx ) {
    
      var (w,h) = this.box(#dimension);
      
      var path = new Graphics.Path();
      //path.moveTo(200,0)
      //    .arcTo(0,0,0,200,100);
          
      path.moveTo(0,0)
          .arcTo(0,200,200,200,100);
      
      
      //var path = roundedRect(10,10,w-20,h-20,30);
          
      gfx.lineWidth(4)
         .lineColor(color(0xFF,0,0))
         .drawPath( path);
    };
    
    $(div#arcTo4).paintContent = function( gfx ) {
    
      var (w,h) = this.box(#dimension);
      
      var path = new Graphics.Path();
          
      path.moveTo(0,200)
          .arcTo(200,200,200,0,100);
      
      
      //var path = roundedRect(10,10,w-20,h-20,30);
          
      gfx.lineWidth(4)
         .lineColor(color(0xFF,0,0))
         .drawPath( path);
    };


    function PathContent() {

      const FontAwesomeCubes = "M384 1632l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm1088 454l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm-448-293l384-165v-266l-384 164v267zm-64-379l441-189-441-189-441 189zm1088 518v416q0 36-19 67t-52 47l-448 224q-25 14-57 14t-57-14l-448-224q-5-2-7-4-2 2-7 4l-448 224q-25 14-57 14t-57-14l-448-224q-33-16-52-47t-19-67v-416q0-38 21.5-70t56.5-48l434-186v-400q0-38 21.5-70t56.5-48l448-192q23-10 50-10t50 10l448 192q35 16 56.5 48t21.5 70v400l434 186q36 16 57 48t21 70z";
        
      var path = new Graphics.Path(FontAwesomeCubes);

      var (pathx1,pathy1,pathx2,pathy2) = path.bounds();      

      this.paintContent = function( gfx ) {
      
        var (w,h) = this.box(#dimension);
            
        gfx.fillColor(color(0xFF,0,0))
          .scale(w / (pathx2 - pathx1),h / (pathy2 - pathy1))
          .translate(-pathx1,-pathy1)
          .drawPath(path);
      };

    }


    </script>
  </head>
<body>

  <div #arcTo1 />
  <div #arcTo2 />
  
  <div #arcTo3 />
  <div #arcTo4 />

  <div #svgPath />


</body>
</html>
